<template>
  <div>
    <el-page-header @back="goBack" class="header_page" content="发票详情"></el-page-header>
    <div class="content">
      <el-form label-position="right" :disabled="true" label-width="80px" :model="invoice">
        <el-row class="content-row" :gutter="20">
          <el-col :span="8">
            <el-form-item label="发票名称" label-width="100px">
              <el-input type="text" v-model="invoice.invoiceName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="发票代码" label-width="100px">
              <el-input type="text" v-model="invoice.invoiceCode"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="发票号码" label-width="100px">
              <el-input v-model="invoice.invoiceNumber"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row class="content-row" :gutter="20">
          <el-col :span="8">
            <el-form-item label="开票日期" label-width="100px">
              <el-input type="text" v-model="invoice.invoiceDate"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="购方名称" label-width="100px">
              <el-input type="text" v-model="invoice.purchaseName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="销售方名称" label-width="100px">
              <el-input v-model="invoice.sellerName"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row class="content-row" :gutter="20">
          <el-col :span="8">
            <el-form-item label="总金额" label-width="100px">
              <el-input type="text" v-model="invoice.amount"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="销售方地址及电话" label-width="150px">
              <el-input type="textarea" v-model="invoice.sellerAddress"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div class="divider-line">
        <i class="el-icon-collection"></i>
        货物详情
      </div>
      <el-table
        :data="tableData"
        border
        style="width: 100%">
        <el-table-column
          prop="commodityName"
          label="货物名称"
          align="center"
          width="200">
        </el-table-column>
        <el-table-column
          prop="commodityType"
          label="规格型号"
          align="center"
          >
        </el-table-column>
        <el-table-column
          prop="commodityUnit"
          align="center"
          label="单位/类型">
        </el-table-column>
        <el-table-column
          prop="num"
          align="center"
          label="数量">
        </el-table-column>
        <el-table-column
          prop="unitPrice"
          label="单价">
        </el-table-column>
        <el-table-column
          prop="amount"
          align="center"
          label="金额">
        </el-table-column>
        <el-table-column
          prop="taxRate"
          align="center"
          label="税率">
        </el-table-column>
        <el-table-column
          prop="taxAmount"
          align="center"
          label="税额">
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
  import * as commonApi from "api/common";

  export default {
    name: "invoiceDetail",
    created(){
      let invoiceId = this.$route.params.invoiceId
      if (invoiceId == undefined){
        this.$router.back(-1)
        return
      }
      this.findInvoice(invoiceId)
    },
    mounted() {
      console.log('----------invoiceDetail mounted-------------')
    },
    destroyed() {
      console.log('----------invoiceDetail destroyed-------------')
    },
    data() {
      return {
        invoice: {},
        tableData: []
      }
    },
    methods: {
      goBack() {
        this.$router.go(-1);//返回上一层
      },
      findInvoice(id){
        const params = {invoiceId: id}
        commonApi.findInvoice(params).then(res => {
          let {data} = res;
          if (data.status === 200) {
            this.invoice = data.data.invoice
            this.tableData = data.data.commodityList
          }
        })
      },
    }
  }
</script>

<style scoped lang="scss">
  @import "../../assets/css/them";
  .header_page{
    background: $baseBgColor;
    padding-bottom: 10px;
  }
  .content{
    padding: 10px;
    /deep/ .el-input.is-disabled .el-input__inner{
      background-color: #ffffff;
      color: #8d9096;
    }
    /deep/ .el-textarea.is-disabled .el-textarea__inner{
      background-color: #ffffff;
      color: #8d9096;
    }
    .divider-line{
      padding: 20px 0;
    }
    .content-row{
      padding-top: 20px;
    }
  }
</style>
